<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>餐厅经营游戏</title>
    <link rel="stylesheet" href="restaurant.css">
    <script src="restaurant.js" defer></script>
</head>

<body>
    <img src='images\background.jpg' alt='背景' id='background'>
    <div class='blackShadow'></div>
    <section class='open'>
        <div class='inline-Box'>
            <h1>WebMOOC餐厅开业啦!</h1>
            <p class='introduction'>WebMOOC餐厅即将开业，请认真经营你的餐厅吧经营餐厅需要做好下面几件事情! 加油!</p>
            <div class='things'>
                <p>招聘厨师</p>
                <p>迎接客人</p>
                <p>烹饪美食</p>
            </div>
            <div class='play'>
                <button class='inline-Box'>
                    <div class='shade'></div>
                    <p>开始经营吧</p>
                </button>
            </div>
        </div>
    </section>
    <section class='menu'>
        <div class='inline-Box'>
            <div class='customerBox'>
                <div class='inline-Box-eating4' id='inline-customerBox1'>
                    <div class='customer-shade'></div>
                </div>
                <img class='customerImg' src='images\customer2.png' alt='custmoer'>
            </div>
            <p class='orderDishes'><span class='customerName'>LSY</span>正在点菜，已点 <span class='totalPrice'></span> 元的菜</p>
            <div class='menu-border'>
                <div class='inline-border'>
                    <p class='allDishes'>凉菜（二选一，可不点）</p>
                    <p class='dishes'><input class='check' type="checkbox" id='coldDishe1'>凉拌SAN<span>...............￥
                            6</span></p>
                    <p class='dishes'><input class='check' type="checkbox" id='coldDishe2'>冷切DOM<span>...............￥
                            4</span></p>
                    <p class='allDishes'>主菜（五选一，必点）</p>
                    <p class='dishes'><input class='check' type="checkbox" id='mainDishe1'>UL炖LI<span>...............￥
                            12</span></p>
                    <p class='dishes'><input class='check' type="checkbox" id='mainDishe2'>红烧HEAD<span>...............￥
                            15</span></p>
                    <p class='dishes'><input class='check' type="checkbox"
                            id='mainDishe3'>酥炸ECharts<span>...............￥ 18</span></p>
                    <p class='dishes'><input class='check' type="checkbox" id='mainDishe4'>炭烤CSS<span>...............￥
                            16</span></p>
                    <p class='dishes'><input class='check' type="checkbox" id='mainDishe5'>清蒸DIV<span>...............￥
                            12</span></p>
                    <p class='allDishes'>饮品（二选一，必点）</p>
                    <p class='dishes'><input class='check' type="checkbox" id='drink1'>鲜榨flex<span>...............￥
                            5</span></p>
                    <p class='dishes'><input class='check' type="checkbox" id='drink2'>小程序奶茶<span>...............￥
                            6</span></p>
                </div>
            </div>
            <div class='orderCompleteBorder'>
                <button class='inline-Box'>
                    <div class='shade'></div>
                    <p>点好了，快点上菜</p>
                </button>
            </div>
            <div class='noeat'>
                <button class='inline-Box'>
                    <div class='shade'></div>
                    <p>不吃了</p>
                </button>
            </div>
        </div>
    </section>
    <section class='buyChef'>
        <div class='inline-Box'>
            <h1>招聘新厨师</h1>
            <p>招聘一名新厨师可以帮你更快地为顾客烹饪菜肴，</p>
            <p>增加餐厅收入。你最多可以拥有六名厨师。</p>
            <p>但每个厨师每周需要你支付工资￥100</p>
            <p>请问你确认新招聘一名厨师吗?</p>
            <div class='confirmRecruitment'>
                <button class='inline-Box'>
                    <div class='shade'></div>
                    <p>是的，确认招聘</p>
                </button>
            </div>
            <div class='noRecruitment'>
                <button class='inline-Box'>
                    <div class='shade'></div>
                    <p>先不了</p>
                </button>
            </div>
        </div>
    </section>
    <section class='fryChef'>
        <div class='inline-Box'>
            <h1>解雇厨师</h1>
            <p class='one'>解雇当前闲置的厨师可以帮你节省成本。</p>
            <p>解雇时会按厨师本周已经工作的日子结算工资，并会赔偿一周工资作为解约金。</p>
            <p>解雇当前厨师结算工资及解约金需要付出￥140</p>
            <div class='confirmFry'>
                <button class='inline-Box'>
                    <div class='shade'></div>
                    <p>是的，确认解雇</p>
                </button>
            </div>
            <div class='noFry'>
                <button class='inline-Box'>
                    <div class='shade'></div>
                    <p>先不了</p>
                </button>
            </div>
            <div class='moneyAlert'>
                <p>你的金额已经不足支付解约金</p>
            </div>
        </div>
    </section>
    <section id='timeBox'>
        <div class='inline-Box'>
            <div class='shade'></div>
            <p>W<span id='dateWeek'>1</span></p>
            <p>D<span id='dateDay'>1</span></p>
        </div>
    </section>
    <section id='moneyBox'>
        <div class='inline-Box'>
            <div class='shade'></div>
            <p id='money'>500</p>
        </div>
    </section>
    <section id='allChefBox' class='small-allChefBox'> <!--big-allChefBox-->
        <div class='small-inline-Box'><!--inline-Box-->
            <div class='shade'></div>
            <div class='chefBox' id='chefBox1'>
                <div class='inline-Box' id='inline-chefBox1'> <!--inline-Box-cooking1-->
                    <div class='chef-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar1'> <!--inline-Bar2-->
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI</p>
                    </div>
                </div>
                <div class='addCookerImgBox'>
                    <img class='addCookerImg' src='images\chef.png' alt='cooker'>
                </div>
                <img class='cookerImg' src='images\chef.png' alt='cooker'>
                <img class='plateImg' src='images\food.png' alt='plate'>
                <div class='multiplyBox' data-index='1'>
                    <button class='inline-multiplyBox' data-index='1'>
                        <div class='multiplyRow' data-index='1'></div>
                        <div class='multiplyColumn' data-index='1'></div>
                    </button>
                </div>
                <button class='addBox'>
                    <div class='inline-multiplyBox'>
                        <div class='multiplyRow'></div>
                        <div class='multiplyColumn'></div>
                    </div>
                </button>
            </div>
            <div class='chefBox' id='chefBox2'>
                <div class='inline-Box' id='inline-chefBox2'> <!--inline-Box-cooking2-->
                    <div class='chef-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar1'>
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI</p>
                    </div>
                </div>
                <div class='addCookerImgBox'>
                    <img class='addCookerImg' src='images\chef.png' alt='cooker'>
                </div>
                <img class='cookerImg' src='images\chef.png' alt='cooker'>
                <img class='plateImg' src='images\food.png' alt='plate'>
                <div class='multiplyBox'>
                    <button class='inline-multiplyBox' data-index='2'>
                        <div class='multiplyRow' data-index='2'></div>
                        <div class='multiplyColumn' data-index='2'></div>
                    </button>
                </div>
                <button class='addBox'>
                    <div class='inline-multiplyBox'>
                        <div class='multiplyRow'></div>
                        <div class='multiplyColumn'></div>
                    </div>
                </button>
            </div>
            <div class='chefBox' id='chefBox3'>
                <div class='inline-Box' id='inline-chefBox3'>
                    <div class='chef-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar1'>
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI</p>
                    </div>
                </div>
                <div class='addCookerImgBox'>
                    <img class='addCookerImg' src='images\chef.png' alt='cooker'>
                </div>
                <img class='cookerImg' src='images\chef.png' alt='cooker'>
                <img class='plateImg' src='images\food.png' alt='plate'>
                <div class='multiplyBox'>
                    <button class='inline-multiplyBox' data-index='3'>
                        <div class='multiplyRow' data-index='3'></div>
                        <div class='multiplyColumn' data-index='3'></div>
                    </button>
                </div>
                <button class='addBox'>
                    <div class='inline-multiplyBox'>
                        <div class='multiplyRow'></div>
                        <div class='multiplyColumn'></div>
                    </div>
                </button>
            </div>
            <div class='chefBox' id='chefBox4'>
                <div class='inline-Box' id='inline-chefBox4'>
                    <div class='chef-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar1'>
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI</p>
                    </div>
                </div>
                <div class='addCookerImgBox'>
                    <img class='addCookerImg' src='images\chef.png' alt='cooker'>
                </div>
                <img class='cookerImg' src='images\chef.png' alt='cooker'>
                <img class='plateImg' src='images\food.png' alt='plate'>
                <div class='multiplyBox'>
                    <button class='inline-multiplyBox' data-index='4'>
                        <div class='multiplyRow' data-index='4'></div>
                        <div class='multiplyColumn' data-index='4'></div>
                    </button>
                </div>
                <button class='addBox'>
                    <div class='inline-multiplyBox'>
                        <div class='multiplyRow'></div>
                        <div class='multiplyColumn'></div>
                    </div>
                </button>
            </div>
            <div class='chefBox' id='chefBox5'>
                <div class='inline-Box' id='inline-chefBox5'>
                    <div class='chef-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar1'>
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI</p>
                    </div>
                </div>
                <div class='addCookerImgBox'>
                    <img class='addCookerImg' src='images\chef.png' alt='cooker'>
                </div>
                <img class='cookerImg' src='images\chef.png' alt='cooker'>
                <img class='plateImg' src='images\food.png' alt='plate'>
                <div class='multiplyBox'>
                    <button class='inline-multiplyBox' data-index='5'>
                        <div class='multiplyRow' data-index='5'></div>
                        <div class='multiplyColumn' data-index='5'></div>
                    </button>
                </div>
                <button class='addBox'>
                    <div class='inline-multiplyBox'>
                        <div class='multiplyRow'></div>
                        <div class='multiplyColumn'></div>
                    </div>
                </button>
            </div>
            <div class='chefBox' id='chefBox6'>
                <div class='inline-Box' id='inline-chefBox6'>
                    <div class='chef-shade'></div> <!--addChef-shade-->
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar1'>
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI</p>
                    </div>
                </div>
                <div class='addCookerImgBox'>
                    <img class='addCookerImg' src='images\chef.png' alt='cooker'>
                </div>
                <img class='cookerImg' src='images\chef.png' alt='cooker'>
                <img class='plateImg' src='images\food.png' alt='plate'>
                <div class='multiplyBox'>
                    <button class='inline-multiplyBox' data-index='6'>
                        <div class='multiplyRow' data-index='6'></div>
                        <div class='multiplyColumn' data-index='6'></div>
                    </button>
                </div>
                <button class='addBox'>
                    <div class='inline-multiplyBox'>
                        <div class='multiplyRow'></div>
                        <div class='multiplyColumn'></div>
                    </div>
                </button>
            </div>
        </div>
    </section>
    <section id='allCustomerBox'>
        <div class='inline-Box'>
            <div class='customerBox' id='customerBox1'>
                <div class='inline-Box-eating' id='inline-customerBox1'>
                    <!--class的1,2,3,4代表四种颜色，序号可更改--><!--inline-Box-eating1-->
                    <div class='customer-shade'></div>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox1-barColor1'> <!--1,2.3.4代表不同颜色，序号可更改-->
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI
                        <div class='drawLine'></div>
                        </p>
                    </div> <!--finished1,2.3代表不同颜色，与eat-seat对应，序号可更改-->
                    <button class='finished1' data-index='1' data-allindex='1'><img data-index='1' data-allindex='1'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox1-barColor2'>
                        <div class='shade'></div>
                        <p class='dish'>爆炒js
                        <div class='drawLine'></div>
                        </p>
                    </div>
                    <button class='finished1' data-index='2' data-allindex='1'><img data-index='2' data-allindex='1'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox1-barColor3'>
                        <div class='shade'></div>
                        <p class='dish'>酥炸HEML
                        <div class='drawLine'></div>
                        </p>
                    </div>
                    <button class='finished1' data-index='3' data-allindex='1'><img data-index='3' data-allindex='1'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <img class='customerImg' src='images\customer2.png' alt='custmoer'>
                <button class='checkout' data-index='1'><img data-index='1' src='images\money.png' alt='结账'></button>
                <button class='placate' data-index='1'><img data-index='1' src='images\heart.png' alt='安抚'></button>
            </div>
            <div class='customerBox' id='customerBox2'>
                <div class='inline-Box-eating' id='inline-customerBox2'> <!--class的无,1,2,3代表四种颜色，序号可更改-->
                    <div class='customer-shade'></div>
                </div>
                <div class='eat-seat'> <!--顾客吃菜进度条，可由class直接添加-->
                    <div class='inline-Bar1' id='customerBox2-barColor1'>
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI
                        <div class='drawLine'></div>
                        </p> <!--划线要和inline-Bar4一起添加-->
                    </div>
                    <button class='finished1' data-index='1' data-allindex='2'><img data-index='1' data-allindex='2'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox2-barColor2'>
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI
                        <div class='drawLine'></div>
                        </p>
                    </div>
                    <button class='finished1' data-index='2' data-allindex='2'><img data-index='2' data-allindex='2'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox2-barColor3'>
                        <div class='shade'></div>
                        <p class='dish'>酥炸HEML
                        <div class='drawLine'></div>
                        </p>
                    </div>
                    <button class='finished1' data-index='3' data-allindex='2'><img data-index='3' data-allindex='2'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <img class='customerImg' src='images\customer1.png' alt='custmoer'>
                <button class='checkout' data-index='2'><img data-index='2' src='images\money.png' alt='结账'></button>
                <button class='placate' data-index='2'><img data-index='2' src='images\heart.png' alt='安抚'></button>
            </div>
            <div class='customerBox' id='customerBox3'>
                <div class='inline-Box-eating' id='inline-customerBox3'>
                    <div class='customer-shade'></div>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox3-barColor1'>
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI
                        <div class='drawLine'></div>
                        </p>
                    </div>
                    <button class='finished1' data-index='1' data-allindex='3'><img data-index='1' data-allindex='3'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox3-barColor2'>
                        <div class='shade'></div>
                        <p class='dish'>酥炸HEML
                        <div class='drawLine'></div>
                        </p>
                    </div>
                    <button class='finished1' data-index='2' data-allindex='3'><img data-index='2' data-allindex='3'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox3-barColor3'> <!--1,2.3.4代表不同颜色，序号可更改-->
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI
                        <div class='drawLine'></div>
                        </p>
                    </div> <!--finished1,2.3代表不同颜色，与eat-seat对应，序号可更改-->
                    <button class='finished1' data-index='3' data-allindex='3'><img data-index='3' data-allindex='3'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <img class='customerImg' src='images\customer3.png' alt='custmoer'>
                <button class='checkout' data-index='3'><img data-index='3' src='images\money.png' alt='结账'></button>
                <button class='placate' data-index='3'><img data-index='3' src='images\heart.png' alt='安抚'></button>
            </div>
            <div class='customerBox' id='customerBox4'>
                <div class='inline-Box-eating' id='inline-customerBox4'>
                    <div class='customer-shade'></div>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox4-barColor1'>
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI
                        <div class='drawLine'></div>
                        </p>
                    </div>
                    <button class='finished1' data-index='1' data-allindex='4'><img data-index='1' data-allindex='4'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox4-barColor2'>
                        <div class='shade'></div>
                        <p class='dish'>酥炸HEML
                        <div class='drawLine'></div>
                        </p>
                    </div>
                    <button class='finished1' data-index='2' data-allindex='4'><img data-index='2' data-allindex='4'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <div class='eat-seat'>
                    <div class='inline-Bar1' id='customerBox4-barColor3'> <!--1,2.3.4代表不同颜色，序号可更改-->
                        <div class='shade'></div>
                        <p class='dish'>UI炖UI
                        <div class='drawLine'></div>
                        </p>
                    </div> <!--finished1,2.3代表不同颜色，与eat-seat对应，序号可更改-->
                    <button class='finished1' data-index='3' data-allindex='4'><img data-index='3' data-allindex='4'
                            src='images\food.png' alt='菜做好了'></button>
                </div>
                <img class='customerImg' src='images\customer3.png' alt='custmoer'>
                <button class='checkout' data-index='4'><img data-index='4' src='images\money.png' alt='结账'></button>
                <button class='placate' data-index='4'><img data-index='4' src='images\heart.png' alt='安抚'></button>
            </div>
            <div class='waitCustomerBox' id='waitCustomerBox0'> <!--id指排队的第几位客人-->
                <div class='inline-Box-eating4'>
                    <div class='customer-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar5'>
                        <div class='shade'></div>
                        <p class='wait'>等待中</p>
                    </div>
                </div>
                <img class='customerImg' src='images\customer4.png' alt='custmoer'>
            </div>
            <div class='waitCustomerBox' id='waitCustomerBox1'>
                <div class='inline-Box-eating4'>
                    <div class='customer-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar5'>
                        <div class='shade'></div>
                        <p class='wait'>等待中</p>
                    </div>
                </div>
                <img class='customerImg' src='images\customer4.png' alt='custmoer'>
            </div>
            <div class='waitCustomerBox' id='waitCustomerBox2'>
                <div class='inline-Box-eating4'>
                    <div class='customer-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar5'>
                        <div class='shade'></div>
                        <p class='wait'>等待中</p>
                    </div>
                </div>
                <img class='customerImg' src='images\customer4.png' alt='custmoer'>
            </div>
            <div class='waitCustomerBox' id='waitCustomerBox3'>
                <div class='inline-Box-eating4'>
                    <div class='customer-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar5'>
                        <div class='shade'></div>
                        <p class='wait'>等待中</p>
                    </div>
                </div>
                <img class='customerImg' src='images\customer4.png' alt='custmoer'>
            </div>
            <div class='waitCustomerBox' id='waitCustomerBox4'>
                <div class='inline-Box-eating4'>
                    <div class='customer-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar5'>
                        <div class='shade'></div>
                        <p class='wait'>等待中</p>
                    </div>
                </div>
                <img class='customerImg' src='images\customer4.png' alt='custmoer'>
            </div>
            <div class='waitCustomerBox' id='waitCustomerBox5'>
                <div class='inline-Box-eating4'>
                    <div class='customer-shade'></div>
                </div>
                <div class='cookingBar'>
                    <div class='inline-Bar5'>
                        <div class='shade'></div>
                        <p class='wait'>等待中</p>
                    </div>
                </div>
                <img class='customerImg' src='images\customer4.png' alt='custmoer'>
            </div>
            <div class='needAlert'>
                <p>餐厅目前有空位，赶紧点击等位客人头像让客人入座点餐吧</p>
            </div>
            <div class='finishAlert'>
                <p>QIAN完成点餐，等候用餐</p>
                <p>疯狂点击厨师头像可以加速做菜</p>
            </div>
            <div class='chefAlert'>
                <p>招聘厨师成功！您已经有<span id='chefNumber'> 5 </span>名厨师</p>
            </div>
        </div>
    </section>

</body>